<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain @isAll="isAll" :type=type @myChange="myChange" @del="del" :list="list"></TodoMain>
    <TodoFooter @filterType=filterType :type=type @cleardone="cleardone" v-if="list.length > 0" :list="list"></TodoFooter>
  </section>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
export default {
    components: { 
      TodoHeader,
      TodoMain,
      TodoFooter 
    },
    data(){
      return {
        type:'all',
        list: JSON.parse(localStorage.getItem('todo')) ||[],
      }
    },
    watch:{
      list:{
        handler(newList){
          // console.log(newList);
          localStorage.setItem('todo',JSON.stringify(newList))
        },
        deep:true
      }
    },
    methods:{
      // 删除
      del(id){
        this.list = this.list.filter(item=>item.id != id)
      },
      // 修改状态
      myChange(id){
        // console.log(id);
        this.list.forEach(item =>{
          if(item.id == id){
            item.isDone = !item.isDone
          }
        })
      },
      // 添加
      add(name){
        if(!name){
          return alert('内容不能为空');
        }
        console.log(name)
        this.list.unshift({
          id: Date.now(),
          name: name,
          isDone: false
        })
      },
      // 清除已完成
      cleardone(){
        console.log('清除已完成');
        this.list = this.list.filter(item=>!item.isDone)
      },
      // 高亮
      filterType(type){
        this.type=type
      },
      // 全选
      isAll(id){
        // console.log(id);
        this.list.forEach(item=>item.isDone=id)
      }
    }
  }
</script>

    TodoMain
<style></style>
